/**
 * 推荐提成管理的列表
 * @author: zxy
 * @update: 2017-03-21
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Table, Popconfirm, Pagination,} from 'antd';

function RecommendManageList({
  total, pageNumber, pageSize, loading, dataSource,
  onAdd, onPageChange, onShowSizeChange,
  onEditItem, onDeleteItem
}) {

  dataSource = [{
    product_name: '推精油',
    commission: '100',
    key: 1,
  },{
    product_name: '推打包',
    commission: '200',
    key: 2,
  },{
    product_name: '推打包',
    commission: '300',
    key: 3,
  },{
    product_name: '推精油',
    commission: '400',
    key: 4,
  },];

  const columns = [{
    title: '产品',
    dataIndex: 'product_name',
    key: 'product_name',
    width: 120,
  }, {
    title: '销售提成',
    dataIndex: 'commission',
    key: 'commission',
    width: 80,
    render: (text, record) =>{
      return (
        <span>
          {`${text}元`}
        </span>
      )
    },
    sorter: (a, b) => a.commission - b.commission,
  }, {
    title: '操作',
    dataIndex: 'ope',
    key: 'ope',
    width: 150,
    render: (text, record) => {
      return (
        <Row>
          <Col span={6} offset={6}><a onClick={() => onEditItem(record.key)}>编辑</a></Col>
          <Col span={6}><Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.key)}><a>删除</a></Popconfirm></Col>
        </Row>)
    }
  }];

  return (
    <div style={{overflow: 'hidden'}}>
      <Table
        columns={columns}
        rowKey={record => record.key}
        dataSource={dataSource}
        loading={loading}
        pagination={false}
        title={
          () =>
            <Row>
              <Col span={18} className="tl"></Col>
              <Col span={6} className="tr"><Button onClick={onAdd} type="primary" icon="plus">添加推荐提成</Button></Col>
            </Row>
        }
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        showTotal={total => `共 ${total} 条`}
        current={pageNumber}
        showSizeChanger
        showQuickJumper
        pageSize={pageSize}
        onChange={onPageChange}
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}

RecommendManageList.propTypes = {
  total: PropTypes.any,
  pageNumber: PropTypes.any,
  dataSource: PropTypes.array,
  onPageChange: PropTypes.func,
  onShowSizeChange: PropTypes.func,
  onEditItem: PropTypes.func,
  onDeleteItem: PropTypes.func,
};

export default RecommendManageList;